<script setup>
import { reactive } from "vue";

let newsList = reactive([
  { id: 1, title: "很好的一种抗癌食物", content: "西蓝花" },
  { id: 2, title: "如何一夜暴富", content: "去买彩票" },
  { id: 3, title: "震惊，万万没想到", content: "明天是周一" },
  { id: 4, title: "好消息", content: "快放五一假了" },
]);
</script>
<template>
  <div class="my-news">
    <ul>
      <li v-for="item in newsList" :key="item.id">
        <!-- 使用路由传递query参数:第一种写法 -->
        <!-- <router-link :to="`/news/details?id=${item.id}&title=${item.title}&content=${item.content}`">
                    {{ item.title }}
                </router-link> -->
        <!-- 使用路由传递query参数:第二种写法 -->
        <!-- <router-link
          :to="{
            path: '/news/details',
            query: {
              id: item.id,
              title: item.title,
              content: item.content,
            },
          }"
        >
          {{ item.title }}
        </router-link> -->
        <!-- <router-link
          :to="{
            name: 'Details',
            query: {
              id: item.id,
              title: item.title,
              content: item.content,
            },
          }"
        >
          {{ item.title }}
        </router-link> -->

        <!-- 使用路由传递params参数 这个地方需要你去路由中去配置-->
        <!-- <router-link to="/news/details/哈哈/嘿嘿/你好">
          {{ item.title }}
        </router-link> -->
        <!-- params路由传参:第一种写法 -->
        <!-- <router-link
          :to="`/news/details/${item.id}/${item.title}/${item.content}`"
        >
          {{ item.title }}
        </router-link> -->
        <!-- params路由传参:第二种写法,注意，params传参数，不能使用path,必须使用name -->
        <router-link
          :to="{
            name: 'Details',
            params: {
              id: item.id,
              title: item.title,
              content: item.content,
            },
          }"
        >
          {{ item.title }}
        </router-link>
      </li>
    </ul>

    <!-- 展示区域 -->
    <router-view></router-view>
  </div>
</template>

<style scoped>
.my-news {
  margin: auto;
}
</style>